<script>
import axios from 'axios';
import request from '@/utils/request'
import { ElMessage } from 'element-plus';

  export default {
    data() {
      var validateUsername = (rule, value, callback) => {
        if (!value) {
          ElMessage.warning('请输入您的用户名');
          callback(new Error(''));
        } else if (value.length < 2 || value.length > 12) {
          ElMessage.error('用户名输入错误，用户名长度应在 2 到 12 个字符');
          callback(new Error(''));
        } else {
          callback();
        }
      };
      var validatePassword = (rule, value, callback) => {
        if (!value) {
          ElMessage.warning('请输入您的密码');
          callback(new Error(''));
        } else if (value.length < 3 || value.length > 12) {
          ElMessage.error('密码输入错误，密码长度应在 3 到 12 个字符');
          callback(new Error(''));
        } else {
          return callback();
        }
      };
      var validateCode = (rule, value, callback) => {
        if (!value) {
          ElMessage.warning('请输入验证码');
          callback(new Error(''));
        } else {
          // 发送验证码验证请求
          axios.post('/verifyCaptcha', { captcha: value })
            .then(response => {
              if (response.data.code === 200) {
                callback();
              } else {
                ElMessage.error('验证码输入错误');
                callback(new Error(''));
              }
            })
            .catch(error => {
              console.error(error);
              ElMessage.error('验证码验证失败');
              callback(new Error(''));
            });
        }
      };
      var validateRole = (rule, value, callback) => {
        if (!value) {
          ElMessage.warning('请选择您的账号身份');
          callback(new Error(''));
        } else {
          callback();
        }
      };
      return {
        myPic: null,
        ruleForm: {
          // 根据环境变量设置默认值
        username: process.env.NODE_ENV === 'development' ? 'admin' : '',
        password: process.env.NODE_ENV === 'development' ? '123456' : '',
          code: '',
          role: ''
        },
        rules: {
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          code: [
            { validator: validateCode, trigger: 'blur' }
          ],
          role: [
            { validator: validateRole, trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      getPic() {
        // 发送请求获取图片验证码
        axios.get('/getPic')
          .then(response => {
            // 将图片验证码赋值给 myPic 变量
            console.log(response.data);
            this.myPic = response.data.data.img;
            // 开发环境下自动填充验证码
          if (process.env.NODE_ENV === 'development') {
            const code = response.data.data.captcha;
            this.ruleForm.code = code;
          }
          })
          .catch(error => {
            // 处理错误
            console.error(error);
          });
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            request.post('/login', this.ruleForm).then(res => {
              console.log(res.data)
              if (res.data.code === 200) {
                const account = res.data.data;
                ElMessage.success('成功登录!');

                sessionStorage.setItem('username', account.username);  // 将用户名存入 sessionStorage
                sessionStorage.setItem('role', account.role);  // 将用户身份存入 sessionStorage
                sessionStorage.setItem('userId', account.associatedId);

                this.$router.push('/index')  // 登录成功后跳转到首页
              } else {
                ElMessage.error(res.data.message || '登陆失败，请稍后重试');
              }
            }).catch(err => {
              console.error(err)
              ElMessage.error('登陆失败，请稍后重试')
            })
          } else {
            ElMessage.error('表单验证失败，请检查输入');
            return false;
          }
        });
      },
    }
  }
</script>

<template>
  <div>{{ getPic() }}</div>
  <el-container class="login-container">
    <!-- 左侧图片区域 -->
    <div class="left">
    </div>
    <!-- 右侧登录 -->
    <div class="right">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm" @keyup.enter="submitForm('ruleForm')">
        <h4>艺人公司 <span>管理系统</span></h4>
        <p>安全登录 · 高效协同 · 数据护航</p>

<!--        <el-form-item prop="role" label-position="left" label="身份">-->
<!--          <template #label>-->
<!--            <div class="icon-input-container">-->
<!--              <el-icon -->
<!--                :style="{ -->
<!--                  color: ruleForm.role ? 'rgb(64, 158, 255)' : '#999',-->
<!--                  transition: 'all .3s ease'-->
<!--                }" -->
<!--                style="font-size: 24px;">-->
<!--                <Money />-->
<!--              </el-icon>-->
<!--              <el-radio-group v-model="ruleForm.role" class="role-radio-group">-->
<!--                <el-radio label="系统管理员" />-->
<!--                <el-radio label="公司运营" />-->
<!--                <el-radio label="经纪人管理员" />-->
<!--                <el-radio label="经纪人" />-->
<!--                <el-radio label="场地管理员" />-->
<!--                <el-radio label="艺人" />-->
<!--              </el-radio-group>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-form-item>-->
        
        <el-form-item prop="username" label-position="left" label="用户名">
          <template #label>
            <div class="icon-input-container">
              <el-icon 
                :style="{ 
                  color: ruleForm.username ? 'rgb(64, 158, 255)' : '#999',
                  transition: 'all .3s ease'
                }" 
                style="font-size: 24px;">
                <User />
              </el-icon>
              <input v-model="ruleForm.username" autocomplete="off" placeholder="请输入用户名" clearable>
            </div>
          </template>
        </el-form-item>

        <el-form-item prop="password" label-position="left" label="密码">
          <template #label>
            <div class="icon-input-container">
              <el-icon 
                :style="{ 
                  color: ruleForm.password ? 'rgb(64, 158, 255)' : '#999',
                  transition: 'all .3s ease'
                }" 
                style="font-size: 24px;">
                <Lock />
              </el-icon>
              <input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" clearable>
            </div>
          </template>
        </el-form-item>

        <el-form-item prop="code" label-position="left" label="验证码">
          <template #label>
            <div class="icon-input-container">
              <el-icon 
                :style="{ 
                  color: ruleForm.code ? 'rgb(64, 158, 255)' : '#999',
                  transition: 'all .3s ease'
                }" 
                style="font-size: 24px;">
                <Notification />
              </el-icon>
              <input v-model="ruleForm.code" placeholder="请输入验证码" clearable style="width: 110px; min-width: 100px; margin-right: 18px;">
              <el-image style="width: 120px; height: 40px; border: solid 2px rgba(0,0,0,0.3); border-radius: 5px; box-shadow:  0 2px 6px -8px rgba(182,157,230, 0.45);" :src="myPic" @click="getPic"></el-image>
            </div>
          </template>
        </el-form-item>
        
        <el-form-item class="button-container">
            <el-button @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
<!--        <router-link to="/regist" class="discrete" target="_self">暂无账号？现在注册！</router-link>-->
      </el-form>
     
    </div>
  </el-container>
</template>
<style scoped>
  * {
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", Helvetica, Arial, sans-serif;
    font-weight:  300; 
    margin:  0; 
  }
  .login-container {
    display:  flex; 
    flex-direction:  row; 
    width: 520px; 
    height: auto; 
    margin: auto auto; 
    background:  #ffffff; 
    border-radius:  4px; 
    margin-top: 20vh;
    box-shadow:  0px 2px 6px -1px rgba(0,0,0,.12);
  }

  .left {
    width:  220px; 
    height:  auto; 
    min-height:  100%; 
    position:  relative; 
    background-image: url("../assets/registerbackground.png");
    background-size:  cover;
    border-top-left-radius:  4px; 
    border-bottom-left-radius:  4px; 
    &::before {
      content: '';
      position: absolute;
      top: 20px;
      left: 15px;
      width: 35px;
      height: 35px;
      background: white;
      border-radius: 50%;
      box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.12);
    }
  }

  .right {
    .el-form {
      padding:  40px 30px; 
      background:  #fefefe; 
      display:  flex; 
      flex-direction:  column;
      align-items:  flex-start; 
      padding-bottom:  20px; 
      width:  300px;

      h4 {
        margin-bottom:  20px;
        color:  #333;
        font-size:  24px; 
        font-weight:  600;  
        
        span {
          color: #409EFF;
          font-weight:  700; 
        }
      }
      p {
        line-height:  155%; 
        margin-bottom:  5px; 
        font-size:  14px; 
        color:  rgba(0, 0, 0, 0.65); 
        font-weight:  400; 
        max-width:  200px; 
        text-align: left;
        margin-bottom:  40px; 
      }

      input {
        font-size:  16px;
        padding:  20px 0px;
        height:  56px; 
        border:  none; 
        border-bottom:  solid 1px rgba(0,0,0,0.1); 
        background:  #fff; 
        min-width:  260px; 
        box-sizing:  border-box; 
        transition:  all .3s linear; 
        color:  #000; 
        font-weight:  400; 
        &:focus {
          border-bottom:  solid 1px rgb(64, 158, 255); 
          outline: 0; 
          box-shadow:  0 2px 6px -8px rgba(64, 158, 255, 0.45);
        }
        &::placeholder {
          font-size:  14px; 
          color:  #999; /* 修改为灰色 */
          font-weight:  400; 
        }
      }

      .el-form-item.is-error input {
        border-bottom: solid 1px #F56C6C !important;
        box-shadow: 0 2px 6px -8px rgba(245, 108, 108, 0.45) !important;
      }

      .el-button {
        width:  120px;
        height:  40px;
        letter-spacing: 3px;
        min-width:  100px;
        border-radius:  20px; 
        text-align:  center; 
        padding:  15px 40px;
        margin-top:  15px; 
        margin-right: 5px;
        background-color: rgb(64, 158, 255); 
        color:  #fff; 
        font-size:  14px;
        margin-left:  auto; 
        font-weight:  700; 
        box-shadow:  0px 2px 6px -1px rgba(0,0,0,0.13); 
        border:  none;
        transition:  all .3s ease; 
        outline: 0; 
        &:hover {
          transform:  translateY(-3px);
          box-shadow:  0 2px 6px -1px rgba(64, 158, 255, 0.65);
          &:active {
            transform:  scale(.99);
          }
        }
      }
    }
  } 

  .button-container {
    display: flex;
    justify-content: flex-end; /* 让子元素右对齐 */
    width: 100%; /* 确保容器宽度为100% */;
  }

  .icon-input-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    gap: 10px; /* 设置图标和输入框之间的间距 */
  }

  .role-radio-group {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    
    .el-radio {
      margin: 0;
      color: rgba(0, 0, 0, 0.65);
      
      :deep(.el-radio__label) {
        font-size: 14px;
      }
    }
  }

  .right .el-form-item {
    margin-bottom: 15px;
  }

  /* 调整输入框样式 */
  .right .el-form input {
    margin: 0; /* 移除可能的外边距 */
    padding: 10px 0; /* 调整内边距 */
    height: auto; /* 调整高度 */
  }
  
  a.discrete {
    color:  rgba(0, 0, 0, 0.4); 
    font-size:  12px; 
    border-bottom:  solid 1px rgba(0, 0, 0, 0);
    padding-bottom:  4px;  
    margin-left:  auto; 
    font-weight:  300; 
    transition:  all .3s ease; 
    margin-top:  0; 
    text-decoration:  none;
    &:hover {
      border-bottom:  solid 1px rgba(0, 0, 0, 0.2);
    }
  }

  .el-form-item.is-error .el-icon {
    color: #F56C6C !important;
  }
  /*
  .el-row {
    margin-bottom: 20px;
    background-color:azure;
    height: 97vh;
    width: 99vw;
    display: flex;
    text-align: center;
    align-items: center;
  }
  .el-divider {
    height: 300px;
    border-color: cornflowerblue;
    border-width: 5px;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }*/
</style>